<template>
  <div class="aside" :class="asideVisible ? 'open': 'close'">
    <div class="aside-title">
      <transition name="fade">
        <span v-show="asideVisible">{{ title }}</span>
      </transition>
      <hamburger :is-active="asideVisible" class="hamburger-container" @toggleClick="visibleChange" />
    </div>
    <transition name="fade">
      <!--      <el-scrollbar style="height:calc(100% - 50px)">-->
      <div v-show="asideVisible" v-loading="loading" class="aside-main">
        <el-tree
          ref="tree"
          class="aside-tree"
          :data="tree"
          :default-expanded-keys="defaultExpandedKeys"
          :node-key="nodeKey"
          :expand-on-click-node="false"
          highlight-current
          @current-change="currentChange"
        >
          <span slot-scope="{ data }" class="tree-node">
            <svg-icon v-if="data.isOutermost" icon-class="business" />
            <svg-icon v-else icon-class="organization" />
            <span class="node-label">{{ data.label }}</span>
            <el-dropdown v-if="mouseButton" trigger="click" placement="bottom" @click.native.stop="()=>{}">
              <span class="icon-r">
                <i class="el-icon-more" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="add(data)">新增</el-dropdown-item>
                <el-dropdown-item @click.native="edit(data)">编辑</el-dropdown-item>
                <el-dropdown-item @click.native="del(data)">删除</el-dropdown-item>
                <el-dropdown-item @click.native="uploadImg(data)">上传图片</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </el-tree>
      </div>
      <!--      </el-scrollbar>-->
    </transition>
    <!--    <add-organization ref="AddOrganization" :tree-data="treeData" />-->
    <add ref="add" />
    <upImg ref="upImg" />
  </div>
</template>

<script type="text/jsx">
  import Hamburger from '@/layout/components/Hamburger/index'
  import add from './components/add.vue'
  import upImg from './components/upImg.vue'
  import { goodsTypeQueryListDel } from '@/api'

  export default {
    components: {
      Hamburger,
      add,
      upImg
    },
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      nodeKey: {
        type: String,
        default: 'gtId'
      },
      expandedLevel: {
        type: Number,
        default: 2
      },
      treeData: {
        type: Array,
        default: []
      },
      selectItem: {
        default: null
      },
      title: {
        type: String,
        required: true
      },
      mouseButton: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        asideVisible: true,
        defaultExpandedKeys: []
      }
    },
    computed: {
      tree() {
        return this.treeData
      }
    },
    watch: {
      treeData: {
        handler(val) {
          if (val && val.length > 0) {
            this._getExpandedKeys(val)
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(val[0][this.nodeKey])
              this.currentChange(val[0])
            })
          }
        },
        immediate: true
      }
    },
    methods: {
      visibleChange() {
        this.asideVisible = !this.asideVisible
      },
      currentChange(data) {
        this.$emit('currentChange', data)
      },
      _getExpandedKeys(data, level = 1) {
        data.forEach(item => {
          if (level < this.expandedLevel) {
            this.defaultExpandedKeys.push(item[this.nodeKey])
            if (item.children) {
              this._getExpandedKeys(item.children, level + 1)
            }
          }
        })
      },
      async add(data) {
        if (this.title === '商品分类') {
          await this.$refs.add.open(data, 'add')
        }
        this.$emit('refresh')
      },
      async edit(data) {
        if (this.title === '商品分类') {
          await this.$refs.add.open(data, 'edit')
        }
        this.$emit('refresh')
      },
      del(data) {
        this.$confirm('您确定要执行操作吗？', '提示', {
          type: 'warning'
        }).then(() => {
          const loading = this.$message({
            message: '正在删除',
            duration: 0,
            iconClass: 'el-icon-loading'
          })
          goodsTypeQueryListDel({ gTypeId: data.gtId }).then(() => {
            this.$emit('refresh')
            this.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          }).finally(() => {
            loading.close()
          })
        })
      },
      async uploadImg(data) {
        await this.$refs.upImg.open(data)
        this.$emit('refresh')
      }
    }
  }
</script>

<style lang="scss" scoped>
.aside {
  position: relative;
  height: 100%;
  border-right: 1px solid #f0f0f0;
  transition: width 0.3s ease-in-out;
  .aside-wrapper {
    width: 260px;
  }
  &.open {
    width: 260px;
  }
  &.close {
    width: 50px;
  }
  .aside-title {
    height: 50px;
    padding-left: 20px;
    overflow: hidden;
    line-height: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #f0f0f0;
    .hamburger-container {
      display: inline-block;
      float: right;
      width: 50px;
      height: 100%;
      padding: 0 !important;
      line-height: 50px;
      text-align: center;
      &:hover {
        background-color: rgba(0, 0, 0, 0.025);
      }
    }
  }
}
.aside-main {
  height: calc(100% - 50px);
  overflow: hidden;
  &:hover {
    overflow: auto;
  }
}
.aside-tree {
  padding-left: 10px;
  .svg-icon {
    color: #c0c4cc;
  }
  & /deep/ .el-tree-node__expand-icon {
    font-size: 14px;
  }
  & /deep/ .el-tree-node__content {
    height: 24px;
    margin: 2px 0;
    line-height: 24px;
    &:hover {
      color: $themeColor;
      background: #fff;
    }
  }
  & /deep/ .is-current > .el-tree-node__content {
    position: relative;
    color: $themeColor;
    background: $themeColor-11;
  }
  .tree-node {
    position: relative;
    width: 100%;
    & /deep/ .el-dropdown {
      margin: 0 10px;
      .icon-r {
        color: #c0c4cc;
        &:hover {
          color: #606266;
        }
      }
    }
  }
}
.aside /deep/ {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-tree > .el-tree-node {
    display: inline-block;
    min-width: 100%;
  }
}
</style>
